<template>
    <div>
        <div class="mg-content">
             <el-row :gutter="24">
                <el-col :span="8" style="position: relative">
                    <div class="el-input el-input-group el-input-group--prepend el-input--medium"  >
                        <div class="el-input-group__prepend" tabindex="-1">入会门店</div>
                      <el-input placeholder="请选择" v-model="districtName" auto-complete="off" :maxlength="5" size="medium" >
                        <el-button slot="append" icon="el-icon-caret-bottom" @click="goChose()"></el-button>
                      </el-input>

                    </div>
                  <div  v-if="isDistricts" style="position: absolute;z-index:999999;background-color: #fff;width:93%;max-height: 30vh;overflow-y: auto;">
                    <div style="text-align:left">
                      <el-tree
                        id="myPanel"
                        :data="treeData"
                        show-checkbox
                        node-key="value"
                        :check-strictly="true"
                        ref="tree"
                        default-expand-all
                        @check-change="checkChange" @node-click="nodeClick">
                      </el-tree>
                    </div>
                  </div>
                     <!-- <el-input  v-model="input"  size="medium" @keyup.enter.native="keyDown($event)" placeholder="请输入类别名称" :maxlength="20"></el-input> -->
                </el-col>
                <el-col :span="8">
                    <div class="el-input el-input-group el-input-group--prepend">
                        <div class="el-input-group__prepend">入会渠道</div>
                        <el-select v-model="sourceTypes" filterable placeholder="请选择入会渠道" size="medium" class="w-100p">
                        <el-option
                            v-for="item in createSourceTypes"
                            :key="item.key"
                            :label="item.text"
                            :value="item.key">
                        </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div>
                        <el-input v-model="vipName"  size="medium" @keyup.enter.native="keyDown($event)" placeholder="请输入会员名称" :maxlength="20">
                            <template slot="prepend">会员名称</template>
                        </el-input>
                    </div>
                </el-col>
                <!-- <el-col :span="10">
                    <div  class="text-left">

                        <el-button type="primary"  size="medium" class="btn-info"   icon="el-icon-search"  @click="search">搜索</el-button>
                        <el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
                    </div>
                </el-col> -->
            </el-row>
            <el-row :gutter="24" style="margin-top:20px">
                <el-col :span="8">
                    <div>
                        <el-input v-model="vipNo"  size="medium" @keyup.enter.native="keyDown($event)" placeholder="请输入会员卡号" :maxlength="20">
                            <template slot="prepend">会员卡号</template>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div>
                        <el-input v-model="phone"  size="medium" @keyup.enter.native="keyDown($event)" placeholder="请输入手机号码" :maxlength="20">
                            <template slot="prepend">手机号码</template>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div  class="text-left">
                        <el-button type="primary"  size="medium" class="btn-info"   icon="el-icon-search"  @click="search">搜索</el-button>
                        <el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-row style="margin:20px 0 0 0">
               <!-- <el-col :span="8" class="text-left">
                    <el-button v-hasPermission="'management_member:import'" class="title-button btn-primary" size="medium" @click="addShow=true;activityId=''" icon="el-icon-plus">导入会员&nbsp;</el-button>
                    <el-button v-hasPermission="'management_member:export'" class="title-button btn-primary" style="margin-left: 0px" size="medium" @click="addShow=true;activityId=''" icon="el-icon-plus">导出会员&nbsp;</el-button>
                </el-col>-->
              <!--  <el-col :span="8">
                        <div style="width:100%;height:20px;"></div>
                </el-col>-->
                <!--<el-col :span="8" class="text-right">
                    <el-button type="danger" class="title-button"  size="medium" icon="el-icon-delete">撤销导入操作&nbsp;</el-button>
                </el-col>-->
            </el-row>
          <!-- <div class="title-buttons">
            <router-link to="/vipMassage/show">
                <el-button  class="title-button btn-primary" size="medium" icon="el-icon-plus">查看&nbsp;</el-button>
            </router-link>
          </div> -->
             <el-row :gutter="20">
                <!--<el-col :span="4">-->
                    <!--<div class="me_title"  >原料分类</div>-->
                    <!--<el-tree :data="treeData"  :props="defaultProps" style="height:400px;overflow-y:auto" :highlight-current="true" :expand-on-click-node="true" :default-expand-all="true" @node-click="handleNodeClick"></el-tree>-->
                <!--</el-col>-->
                <el-col :span="24">
                <el-table
                     v-loading="loading"
                     :data="tableData"
                     :border="true"
                     style="width: 100%">
                    <el-table-column
                       type="index"
                       width="50">
                     </el-table-column>
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                            label="姓名">
                        <template  slot-scope="scope">
                            <span>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="性别">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.gender">{{scope.row.gender.text}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="手机号">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.phone">{{scope.row.phone}}</span>
                          <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="入会门店">
                        <template  slot-scope="scope">
                          <span v-if="scope.row.branchName">{{scope.row.branchName}}</span>
                          <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="入会渠道">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.source">{{scope.row.source}}</span>
                            <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="持卡情况">
                        <template  slot-scope="scope">
                            <!--<span>{{scope.row.count}}</span>-->
                          <div @click="getMemberCard(scope.row)" style="cursor: pointer" slot="reference" class="name-wrapper">
                            <el-tag size="small">{{scope.row.count}}</el-tag>
                          </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="消费次数">
                        <template  slot-scope="scope">
                            <span>{{scope.row.consumeCount}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="消费总额">
                        <template  slot-scope="scope">
                            <span>{{scope.row.consumeAmount}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="最后消费时间">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.consumeTime">{{scope.row.consumeTime}}</span>
                          <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="详情" width="70">
                        <template  slot-scope="scope">
                            <router-link :to="'/vipMassage/show?id='+scope.row.id">
                              <el-button type="text" size="small" style="margin: 0px;">查看</el-button>
                            </router-link>
                         </template>
                     </el-table-column>
                     <!-- <el-table-column
                             label="修改" width="70">
                         <template  slot-scope="scope">
                                <span class="icon icon-xiugai-copy table-icon" @click="addShow=true;activityId=scope.row.id"></span>
                         </template>
                     </el-table-column>
                     <el-table-column
                              label="删除" width="70">
                          <template  slot-scope="scope">
                            <span class="icon icon-delete table-icon" @click="handleDelete(scope.$index,scope.$index,scope.row.id)"></span>
                          </template>
                     </el-table-column> -->
                </el-table>
                </el-col>
            </el-row>
            <br>
            <div class="block">
                <el-row>
                    <el-col :span="24" class="text-right">
                       <el-pagination
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="pageSizes"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
                       </el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>
        <model :isShow="addShow" :id="activityId" @close="addClose" @addSuccess="addSuccess"></model>
        <PluginConfirm
                :show="dialogIsShow"
                @chooseSure="chooseSure()"
                @chooseCancel="chooseCancel()"
                @dialogResult="dialogResult">
        </PluginConfirm>
      <el-dialog title="会员信息" style="margin-top: 10vh" class="noselect" :close-on-click-modal="false" :visible.sync="showDialog"  :before-close="handleClose">
        <el-row style="height: 40px;line-height: 40px;text-align: center">
          <el-col :span="7">
            会员名称：{{member.name}}
          </el-col>
          <el-col :span="7">
            <span v-if="member.gender">性别：{{member.gender.text}}</span>
          </el-col>
          <el-col :span="7">
            电话：{{member.phone}}
          </el-col>
        </el-row>
        <div style="border: 1px solid #eef1f6;height: 500px">
          <el-row class="membersTitle" style="width: 100%">
            <el-col :span="3">
              会员卡类型
            </el-col>
            <el-col :span="4">
              会员卡号
            </el-col>
            <el-col :span="3">
              卡状态
            </el-col>
            <el-col :span="4">
              是否享受会员价
            </el-col>
            <el-col :span="3">
              积分
            </el-col>
            <el-col :span="3">
              主账户余额
            </el-col>
            <el-col :span="4">
              赠送账户余额
            </el-col>
          </el-row>
          <el-row class="membersContent" v-for="i in showMemberCards" style="width: 100%">
            <el-col :span="3">
              {{i.typeName}}&nbsp;
            </el-col>
            <el-col :span="4">
              {{i.no}}&nbsp;
            </el-col>
            <el-col :span="3">
                <span v-if="i.state">{{i.state.text}}&nbsp;</span>
                <span v-else>----&nbsp;</span>
            </el-col>
            <el-col :span="4">
              <span v-if="i.hasVipPrice">是</span>
              <span v-else>否</span>&nbsp;
            </el-col>
            <el-col :span="3">
              <span v-if="i.hasConsumeRecharge">可积分</span>
              <span v-else>不可积分</span>&nbsp;
            </el-col>
            <el-col :span="3">
              {{i.amount}}&nbsp;
            </el-col>
            <el-col :span="4">
              {{i.giftAmount}}&nbsp;
            </el-col>
          </el-row>
        </div>
      </el-dialog>
    </div>
</template>
<script>
    //注意路径
    import model from './model.vue'
    export default{
        data(){
            return {
              sourceTypes:"",
                defaultProps: {
                    children: 'children',
                    label:function(data){
                            return "["+data.no+"]"+data.name;
                        }
                },
                loading:false,
                tableData: [],
                pageSizes:window.pageSizes,//所有可选择的条数
                pageSize:window.pageSize,//控制一页显示的条数
                total:10,//总条数
                input:"",
                currentPage:1,
                inputValue:"",
                dialogIsShow:false,
                addShow:false,
                activityId:"",
                dialogIsShow:false,
                curDataRow:null,
                curDataIndex:0,
                selectItmeIndex:"",
                selectItemDetailsIndex:"",
                selectDelId:"",
              createSourceTypes:[],
              treeData:[],
              districtName:"",
              districtId:"",
              isDistricts:false,
              editCheckId:"",
              showDialog:false,
              showMemberCards:[],
              member:{},
              vipName:'',
              vipNo:'',
              phone:''

            }
        },
        components: {
           model
        },
      mounted(){
        let _this=this;
        document.addEventListener("click",function(event){
          var sp = document.getElementById("myPanel");
          if(sp){
            if(!sp.contains(event.target)){            //这句是说如果我们点击到了id为myPanel以外的区域
              _this.isDistricts=false;
            }
          }
        })
      },
        created(){
            window.this = this;
            this.initData();
        },
        methods: {
          getMemberCard(row){
            this.router.push({ path: "/operatingData/dataTable",query:{id:row.id}});

           /* this.member = row;
            this.$axios.get("members/members/getMemberCard?id="+row.id).then((data)=>{
              this.showMemberCards = data.content;
            }).catch(function(err){
            })
            this.showDialog = true;*/
          },
          handleClose(){
            this.showDialog = false;
          },
          goChose(){
            this.isDistricts=!this.isDistricts;
          },
          checkChange(item,node,self){
            console.log(item);
            if(node==true ){    //点击未选中复选框
              this.editCheckId=item.value;
              this.$refs.tree.setCheckedKeys([item.value]);
              this.districtName=item.name;
              this.districtId=item.id;
            }else{
              if(this.editCheckId==item.value ){   //点击已选中复选框，保证选中一个
                this.$refs.tree.setCheckedKeys([item.value]);
                this.districtName=item.name;
              }
            }
          },
          nodeClick(item,node,self){
              this.editCheckId=item.value;
              this.$refs.tree.setCheckedKeys([item.value]);
          },
            initData(){
                this.currentPage=1;
                this.getData();
            },
            keyDown(ev){
                if(ev.keyCode==13) {
                    this.currentPage=1;
                    this.inputValue=this.input;
                    this.getData();
                }
            },
            cleanSearch(){
                this.currentPage=1;
                this.input="";
                this.inputValue=this.input;
                this.districtName='';
                this.sourceTypes='';
                this.vipName='';
                this.vipNo='';
                this.phone='';
                this.getData();
            },
            search(){
                this.currentPage=1;
                this.inputValue=this.input;
                this.getData();
            },
            handleCurrentChange(currentPage){
                this.currentPage=currentPage;
                this.getData();
            },
          newLabel(newList) {
            if (newList) {
              for (var i = 0; i < newList.length; i++) {
                console.log(newList[i].iBranch);
                if(newList[i].iBranch){
                  newList[i].value = newList[i].id + "_b";
                }else {
                  newList[i].value = newList[i].id + "";
                }
                newList[i].label = newList[i].name;
                if (!newList[i].children || newList[i].children.length == 0) {
                  newList[i].children = null;
                } else {
                  for (var s = 0; s < newList[i].children.length; s++) {
                    if(newList[i].iBranch){
                      newList[i].children[s].value = newList[i].children[s].id + "_b";
                    }else {
                      newList[i].children[s].value = newList[i].children[s].id + "";
                    }
                    newList[i].children[s].label = newList[i].children[s].name;
                    this.newLabel(newList[i].children[s].children);
                  }
                }
              }
            }
          },
            getData(){
                // this.loading=true;
                var se = "";
                if(this.vipName){
                  se += "&search.name_like="+this.vipName;
                }else if(this.phone){
                  se += "&search.phone_like="+this.phone;
                }else if(this.vipNo){
                  se += "&search.no_eq="+this.vipNo;
                }else if(this.sourceTypes){
                  se += "&search.source_eq="+this.sourceTypes;
                }else if(this.districtName){
                  se += "&search.branchName_eq="+this.districtName;
                }

                console.log(se);

                this.$axios.get("members/members?page.pn="+this.currentPage+"&page.size="+this.pageSize+se).then((data)=>{
                    this.loading=false;
                    this.tableData=data.content.memberPage.content;
                    this.total=data.content.memberPage.totalElements;
                  data.content.createSourceTypes.splice(0,0,{text:"全部",key:""})
                    this.createSourceTypes=data.content.createSourceTypes;
                  var tree = data.content.districts;
                  this.newLabel(tree);
                  this.treeData = tree;
                }).catch(function(err){
                 })
            },
            handleDelete(index,delIndex,id) {
                this.selectItmeIndex=index,
                this.selectItemDetailsIndex=delIndex;
                this.selectDelId=id;
                this.dialogIsShow=true;
            },
             dialogResult(param){
                this.dialogIsShow=param.close;
                if(param.choose==="ok"){
                    //console.log("确定");
                    this.$axios.delete("materials/materialCategorys/"+this.selectDelId).then(data=>{
                        if(data.status==200){
                            this.tableData.splice(this.curDataIndex,1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.initData();
                        }else{
                            this.$message({
                                type: 'error',
                                message: data.message
                            });
                        }
                    })
                }else if(param.choose==="cancel"){
                    //console.log("取消");
                }else{
                    //console.log("不做处理");
                }
            },

              addSuccess(item){
                this.addShow=false;
                this.currentPage=1;
                this.initData();
              },

            addClose(){
                this.addShow=false;
            },
            handleSizeChange(val){
                this.pageSize=val;
                this.getData();
            },
        }
    }
</script>
<style scoped>
  .membersTitle{
    background-color: #eef1f6;
    height: 44px;
    line-height: 44px;
    font-weight: 600;
    text-align: center;
  }
  .membersContent{
    background-color: #fff;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #eef1f6 !important;
    text-align: center;
  }
</style>
